<style lang="less">
@import "./ProductShop.less";
</style>

<template>
  <div :class="{'shop-hover-container' : type!='saleoff'}">
    <a @click="openProduct(data)" :class="{'shop-product-wrap':true, 'saleoff-wrap': type=='saleoff'}" :style="topBorderColor">
      <div :class="{'bg': type=='saleoff', 'bgt': type!='saleoff'}"></div>
      <div v-if="data.flag" class="flag" :style="flagBg">{{data.flag}}</div>
      <img v-lazy="data.picUrl" width="160" height="160" :style="{marginBottom: type=='saleoff' ? '22px':'18px'}" />
      <div class="title">{{data.title}}</div>
      <div class="desc">{{data.description}}</div>
      <div class="item-price">
        <div class="item-discount">{{data.price}} 元</div>
        <del v-if="data.originPrice" class="item-origin">{{data.originPrice}} 元</del>
      </div>
      <div class="review-wrapper" v-if="data.review&&data.reviewer">
        <div class="review">{{data.review}}</div>
        <div class="reviewer">来自于 {{data.reviewer}} 的评价</div>
      </div>
    </a>
  </div>
</template>

<script>
export default {
  name: "ProductShop",
  data() {
    return {};
  },
  props: {
    data: {
      type: Object,
      default: function() {
        return {};
      }
    },
    type: {
      type: String,
      default: ""
    },
    topColor: {
      type: Number,
      default: -1
    }
  },
  computed: {
    flagBg() {
      let tag = String(this.data.flagType).toLowerCase();
      if (tag == "saleoff") {
        return "background-color: #e53935;";
      } else {
        return "background-color: #83c44e;";
      }
    },
    topBorderColor() {
      if (this.topColor == 0) {
        return "border-top-color: #ffac13;";
      } else if (this.topColor == 1) {
        return "border-top-color: #83c44e;";
      } else if (this.topColor == 2) {
        return "border-top-color: #2196f3;";
      } else if (this.topColor == 3) {
        return "border-top-color: #e53935;";
      } else if (this.topColor == 4) {
        return "border-top-color: #00c0a5;";
      } else if (this.topColor == 5) {
        return "border-top-color: #ffac13;";
      } else if (this.topColor == 6) {
        return "border-top-color: #83c44e;";
      } else if (this.topColor == 7) {
        return "border-top-color: #2196f3;";
      } else if (this.topColor == 8) {
        return "border-top-color: #e53935;";
      } else if (this.topColor == 9) {
        return "border-top-color: #00c0a5;";
      } else {
        return "border-top-style: none;";
      }
    }
  },
  methods: {
    openProduct(v) {
      // window.open("//" + window.location.host + "/product?id=" + v.id);
    }
  },
  created() {}
};
</script>
